<template>
  <Container class="brand-list">
    <div class="container-header group" slot="header">
      <Input class="start" v-model.trim="list.form.keyword" placeholder="合同名称" @on-enter="onSearchBtnClick"/>
      <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
    </div>
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAddType"
      >添加合同</Button>
      <TabPane label="合同列表" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from "@/table";
import ContractListData from "./list/ContractListData";
import BrandSelect from "@/components/BrandSelect";
import { clearEmpty } from "@/util";
export default {
  name: 'setting/contract/list',
  components: {
    BrandSelect
  },
  data() {
    return {
      radio: "yes",
      tab: "tab1",
      list: ContractListData,
      options: {
        tableHeight: 300
      },
    };
  },
  mounted() {
    this.initTable();
    this.$bus.$on("onAddType", this.onAddType);
    this.$bus.$on("onEdit", this.onEdit);
    this.$bus.$on("onDetail", this.onDetail);
    this.getData();
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1;
      this.getData();
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        name: this.list.form.keyword
      };
      param = clearEmpty(param);
      this.list.status = "loading";
      this.$jsonPost("/supplierAgreement/findPage", param)
        .then(data => {
          this.list.data = [];
          this.list.totalItem = Number(data.total);
          this.list.data = (data.records || [])
          this.list.status = "pass";
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    onEdit(row) {
      this.$router.push({
        name: 'setting/contract/edit',
        query: {
          id: row.id,
          mode: 'edit'
        }
      })
    },
    onAddType() {
      this.$router.push({
        name: 'setting/contract/edit'
      })
    },
    onDetail(row) {
      this.$router.push({
        name: 'setting/contract/edit',
        query: {
          id: row.id,
          mode: 'info'
        }
      })
    },
   
    onDelete(id, name, index) {
      this.list.data.splice(index, 1);
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.getData();
    }
  },
  watch: {
  }
};
</script>
